<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入搜索信息'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate @add="add()"></CardDate>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="type_id" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="type_name" label="类别名称" align="center">
        </el-table-column>
        <el-table-column prop="type_describe" label="类别描述" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="编辑商品类别信息" class="chang-product" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
      center>
      <el-form class="info-form" inline :rules="alterRules" :model="alterForm" ref='changeFrom'>
        <el-form-item label="商品名称：" prop="type_name" style="width: 100%">
          <el-input size="small" v-model="alterForm.type_name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品描述：" prop="type_describe" style="width: 100%">
          <el-input size="small" type="textarea" autosize v-model="alterForm.type_describe" placeholder="商品描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 12px 54px;margin: 0 55px;" @click="submitChange('changeFrom')">确
          定</el-button>
        <el-button style="padding: 12px 54px;margin: 0 55px;" @click="cancelChange('changeFrom')">取
          消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getType, deletsType, addType } from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardDate from '@/components/commodity/CardDate.vue'
export default {
  name: 'KodaiProductType',

  data () {
    return {
      tableData: [],
      alterForm: {
        type_id: '',
        type_name: '',
        type_describe: '',
      },
      alterRules: {
        type_name: [{ required: true, message: '请输入类别名称', trigger: 'blur' },
        { min: 1, max: 30, message: '名称长度不允许超过 30 个字符', trigger: 'blur' }],
        type_describe: [{ required: true, message: '请输入类别描述', trigger: 'blur' },
        { min: 1, max: 100, message: '描述信息长度不允许超过 100 个字符', trigger: 'blur' }]
      },
      insert: false,   //插入时的标志
      dialogFormVisible: false,
    };
  },

  mounted () {
    getType().then(res => {
      this.tableData = res.data.data
      this.alterForm.type_id = res.data.data.length + 1
    })
  },

  methods: {
    add () {
      this.dialogFormVisible = true;
      this.insert = true
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true
      console.log(index, row);
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该品牌信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
        deletsType(row).then(res => {
          loading.close();
          if (res.data.code === 200) {
            // rows.splice(index, 1);//删掉该行
            this.$router.go(0)
            this.$notify({ title: '成功', message: '品牌(' + row.brand_name + ')\t移除成功', type: 'success' });
          } else {
            this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
          }
        }).catch((err) => {
          loading.close();
          this.$message.error(err);
        })
      })
    },
    submitChange (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.insert) {
            console.log(this.alterForm);
            // 显示加载动画
            let loading = this.$loading({ lock: true, text: "注册中", background: "rgba(0, 0, 0, 0.7)" });
            try {
              const res = await addType(this.alterForm)
              if (res.data.code === 200) {
                this.showMessage.call(this, 'success', '商品类别添加成功');
                this.$router.go(0)
              } else {
                this.showMessage.call(this, 'error', '商品类别添加失败：' + res.data.msg);
              }
            } catch (err) {
              // 显示失败的消息，并提示错误原因
              this.showMessage.call(this, 'error', '商品类别添加失败' + err.message);
            } finally {
              // 关闭加载动画
              loading.close();
            }
          } else {

          }
        } else {
          return false;
        }

      })
    },
    cancelChange (formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.$notify({ title: '操作取消', message: '', type: 'success' });
    }
  },
  components: {
    CardHeader,
    CardDate,
    CardinputVue
  }
};
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__header {
  padding: 2px 10px;
}
</style>